<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图-延迟加载</title>
		<!-- 轮播图---页面行为   JavaScript  功能效果一样
					框架  Jquery           功能效果一样【简化开发】
					terseBannerJs建立在Jquery基础之上，快速制作轮播图
		 -->
		 <link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
			<!-- 轮播图 id和class命名问题，提醒：重名 -->
			<!-- 2.轮播图主空间区域 -->
			<div class="main">
				<!-- 2.id="animation"针对轮播添加效果 -->
				<div id="animation"></div>
				<!-- 3.class="container"轮播图空间范围 -->
				<div class="container">
					<!-- 4.class=banner  针对轮播图效果功能
					 lazyload轮播图功能为：延迟加载-->
					<div class="banner" id="lazyload">
			
						<ul>
							<li><img src="img/banner01.jpg" alt="1"></li>
							<li><img src="img/banner02.jpg" alt="2"></li>
							<li><img src="img/banner03.jpg" alt="3"></li>
							<li><img src="img/banner04.jpg" alt="4"></li>
							<li><img src="img/banner05.jpg" alt="5"></li>
						</ul>
					</div>
				</div>
				
				
			</div>
			
			
			<script src="js/highlight.pack.js"></script>
			<script src="js/jquery-1.11.1.js"></script>
			<script src="js/jquery.terseBanner.min.js"></script>
			<script src="js/script.js"></script>
		</body>
</html>